@charset "utf-8";
//计算根的像素大小
@function r($px) {
    @return ($px / 40) *1rem;
}

//计算减半的函数
@function half($px) {
    @return ($px / 2) *1px;
}

$color_them: #ffa969;
$font_size:r(30);
@mixin a_block {
    display: block;
    width: 100%;
    height: 100%;
}

@mixin middle {
    vertical-align: middle;
    display: inline-block;
}

html,
body {
    height: 100%;
    position: relative;
}

#main {
    position: absolute;
    top: half(123);
    bottom: half(135);
    width: r(750);
    padding: 0 half(23);
    box-sizing: border-box;
    //多出部分滚动
    overflow: scroll;
    // 滚动条产生滚动回弹的效果
    -webkit-overflow-scrolling: touch;
}

.search {
    text-align: center;
    .searchBar {
        width: r(276);
        height: half(50);
        border: 1px solid $color_them;
        border-radius: half(50);
        overflow: hidden;
        margin: half(34) auto 0;
        input[type="search"] {
            width: calc(100% - 30px);
            height: 100%;
            vertical-align: top;
            border: none;
            padding-left: 12px;
            font-size: 12px;
        }
        input[type="image"] {
            height: half(36);
            vertical-align: top;
            margin-top: half(9);
        }
    }
    h1 {
        font-size: r(26);
        margin: r(33) 0 r(15) 0;
    }
    .search_content {
        padding: 0 r(88);
        ul {
            li {
                text-align: center;
                background-color: #dcdcdc;
                width: 24%;
                height: r(64);
                line-height: r(64);
                margin-left: 1%;
                margin-bottom: r(4);
                a {
                    color: #898989;
                    font-size: r(20);
                }
            }
        }
    }
}

.hot_search,
.commend_search {
    .content_dd {
        margin-left: r(16);
        margin-top: r(25);
        .info_left {
            font-size: 0;
            .info_left_img,
            h2 {
                @include middle;
            }
            .info_left_img {
                width: r(31);
                height: r(45);
                img {
                    width: 100%;
                }
            }
            h2 {
                margin-left: r(23);
                font-size: $font_size;
            }
            .info_left_img_1 {
                width: r(41);
                height: r(39);
                img {
                    width: 100%;
                }
            }
        }
        .info_right {
            font-size: 0;
            margin-top: r(9);
            h2,
            .more {
                @include middle;
            }
            h2 {
                font-size: r(24);
                margin-right: r(8);
            }
            .more {
                width: r(25);
                height: r(26);
                a {
                    @include a_block;
                    img {
                        width: 100%;
                    }
                }
            }
        }
    }
    .commend_search_content,
    .hot_search_content {
        padding: r(32) 0;
    }
}

.hot_search {
    .hot_search_content {
        display: flex;
        .hot_search_content_left {
            flex: 0 0 r(278);
            width: r(278);
            height: r(351);
            margin-right: r(10);
            a {
                @include a_block;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .hot_search_content_right {
            flex: auto;
            .hot_img {
                width: r(419);
                height: r(146);
                margin-bottom: r(8);
                a {
                    @include a_block;
                    img {
                        width: 100%;
                    }
                }
            }
            .hot_img_1 {
                width: r(195);
                height: r(197);
                a {
                    @include a_block;
                    img {
                        width: 100%;
                    }
                }
            }
            .hot_img_2 {
                width: r(211);
                height: r(197);
                margin-left: r(12);
                a {
                    @include a_block;
                    img {
                        width: 100%;
                    }
                }
            }
        }
    }
}

.commend_search {
    .commend_search_content {
        margin: 0 auto;
        ul {
            display: flex;
            li {
                flex: auto;
                width: r(220);
                height: r(200);
                overflow: hidden;
                a {
                    @include a_block;
                    img {
                        width: 100%;
                        height: r(200);
                    }
                }
                &:nth-child(2) {
                    padding: 0 r(18);
                }
            }
        }
    }
}